<template>
  <el-card class="box-card">
    <el-col :span="24" class="toolbar">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="searchParam.user" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleSearch">查询</el-button>
        </el-form-item>
        <el-form-item v-if="hasAddPermission">
          <el-button @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <el-table :data="page.rows" highlight-current-row stripe border v-loading="listLoading">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="username" label="姓名"></el-table-column>
      <el-table-column prop="roleName" label="角色"></el-table-column>
      <el-table-column prop="cityName" label="城市"></el-table-column>
      <el-table-column prop="createdAt" label="创建日期"></el-table-column>
      <el-table-column label="操作" width="80">
        <template scope="scope">
          <el-button icon="edit" v-if="hasEditPermission" type="primary" size="mini" @click="handleEdit(scope.row)" title="编辑管理员"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-col :span="24" class="toolPage">
      <el-pagination :current-page="page.current" :page-sizes="[10, 20, 50, 100]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
        :total="page.total" style="float:right" @size-change="handleSizeChange" @current-change="handlePageChange">
        </el-pagination>
    </el-col>
  </el-card>
</template>

<script>
  import * as Auth from 'common/auth'

  export default {
    created() {
      this.loadGridData()
    },
    data() {
      return {
        page: {
          total: 0,
          current: 1,
          size: 10,
          rows: []
        },
        searchParam: {
          user: ''
        },
        listLoading: true
      }
    },
    computed: {
      hasAddPermission: () => Auth.hasPermission('admins:add'),
      hasEditPermission: () => Auth.hasPermission('admins:edit')
    },
    methods: {
      handleSizeChange(size) {
        this.page.size = size
        this.loadGridData()
      },
      handlePageChange(current) {
        this.page.current = current
        this.loadGridData()
      },
      loadGridData() {
        this.listLoading = true;
        let param = {
          page: this.page.current,
          pageSize: this.page.size,
          user: this.searchParam.user
        }
        this.axios.get("/admins", { params: param }).then(response => {
          this.page = response.data
          this.listLoading = false
        })
      },
      handleAdd() {
        this.$router.push('/admins/new')
      },
      handleEdit(row) {
        this.$router.push(`/admins/${row.id}/edit`)
      },
      handleSearch() {
        this.loadGridData()
      }
    }
  }

</script>
<style>

</style>